<template>
  <div id="index">
    <!-- header start -->
    <!-- end top -->
    <!-- end  -->
    <!-- end banner -->
    <div class="zscf_con_wper pb30">
      <div class="zscf_con px1000">
        <div class="zscf_block1 mt30 ">
          <h2 class="zscf_block1_tit clearfix"><span class="fl"><strong>发标预告</strong>换卡后放假啊客户看 将黑金卡号看见啊后防盗卡…… </span><a href="javascript:;" @click="changemoduletonoticelist('noticelist')" class="fr">查看更多>></a></h2>
          <div class="clearfix clear">
            <ul class="zscf_block1_text clearfix fl">
              <li>
                <span class="block1_libg01">已加入中兴财富</span>
                <br>
                <em><strong>{{homepage.hompageJoined}}</strong>人</em>
              </li>
              <li>
                <span class="block1_libg02">平台总金额</span>
                <br>
                <em><strong>{{homepage.hompageSummoney}}</strong>元</em>
              </li>
              <li>
                <span class="block1_libg03">平台总收益</span>
                <br>
                <em><strong>{{homepage.hompageEamings}}</strong>元</em>
              </li>
            </ul>
            <!-- end l -->
            <div class="block1_r fl">
              <h2 class="block1_r_tit clearfix"><span>网站公告</span>
                <router-link to="/noticelist">
                  <a href="javascript:;" @click="changemoduletonoticelist('noticelist')">+</a>
                </router-link>
              </h2>
              <ul v-for="(show,index) in ShowPageInfo.list">
                <li @click="changemoduletoshows('shows',show.showId)"><span>{{show.showName}}</span><em>{{$moment(show.showDate).format('YYYY-MM-DD')}}</em></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- end block1 -->
        <div class="zscf_block2 mt30 clearfix ">
          <div class="zscf_block2_l fl" v-for="(invest,index) in InvestPageInfo.list">
            <div class="block2_biao clearfix" >
              <div class="clearfix">
                <span class="fl">{{invest.investName}}【{{invest.investNumber}}】</span>
                <div class="block2_biao_r fr">
                  <div class="tjxm_jindu ">

                    <div class="press_wper ">
                      <div >
                        <el-progress :text-inside="true" :stroke-width="26" :percentage="parseInt(invest.investSubsribe)"></el-progress>
                      </div>
                    </div>
                    <span class="">11%</span>
                  </div>
                </div>
              </div>
              <ul class="clearfix clear block2_biao_ul">
                <li>起投资金：<em>{{invest.investStartpay}}元</em></li>
                <li><img src="../assets/images/bao.png" alt="">年华收益：<strong>{{invest.investGetyearmoney}}<i>%</i></strong>
                </li>
                <li>
                  产品期限：<span>{{invest.investDay}}天</span>
                </li>
                <li>
                  借款金额：<span>{{invest.investAmount}}元</span>
                </li>
                <li>
                  <a href="javascript:void(0)" class="invest_btn" @click="changeModule('detail',invest.investId)">立即投资</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- end left -->
          <div class="zscf_block2_r fl">
            <div class="block2_r_video">
              <!-- <img src="images/video.png" alt=""> -->
              <embed src="" type="" width="250px;" height="180px;">
            </div>
            <div class="block2_r_tip" @click="changemoduletonoticelist('noticelist')">1分钟让你了解中兴财富</div>
          </div>
          <!-- end right -->
        </div>
        <!--  end block2 -->
        <div class="zscf_block3 mt30 ">
          <h2 class="block3_tit clearfix"><span class="block3_curspan">项目列表</span><a href="javascript:;" @click="changemoduletoinvest('invest')">更多></a></h2>
          <div class="block3_pro_box clear">
            <div class="block3_prolist">
              <!--开始信用标展示-->
              <div class="block3_proone clearfix clear" v-for="(investxin,index) in InvestXinPageInfo.list">
                <span class="fl proone_left"><img src="../assets/images/xin.png" alt=""></span>
                <!--  -->
                <div class="fl proone_center">
                  <div class="clearfix">
                    <span class="fl proone_center_span1">{{investxin.investName}}【{{investxin.investNumber}}】</span>
                    <div class="block2_biao_r fr">
                      <div class="tjxm_jindu ">

                        <div class="press_wper ">
                            <el-progress :text-inside="true" :stroke-width="28" :percentage="parseInt(investxin.investSubsribe)"></el-progress>
                        </div>
                        <span class="">11%</span>
                      </div>
                    </div>
                  </div>
                  <ul class="clearfix proone_center_ul clear pt10">
                    <li>预计年华收益:<span>{{investxin.investGetyearmoney}}%</span></li>
                    <li>投资期限:<span>{{investxin.investDeadline}}个月</span></li>
                    <li>借款金额：<span>{{investxin.investAmount}}</span></li>
                  </ul>
                </div>
                <!--  -->
                <a href="javascript:void(0)" class="block3_btn fl" @click="changeModule('detail',investxin.investId)">立即投资</a>
              </div>
              <!--listone  -->
            </div>
            <!-- end 项目列表 -->
            <div class="block3_prolist" style="display:none;">
              2
            </div>
          </div>
        </div>
        <!-- end block3 -->
        <div class="zscf_block4 mt30">
          <img src="../assets/images/block4_adver.png">
        </div>
        <!-- end block4 -->
        <div class="zscf_block5 mt30 clearfix">
          <div class="zscf_block5_l fl mr20">
            <h2 class="block3_tit clearfix block5_l_tit"><span class=" news_span" :class="{block3_curspan:(flage)}" @click="onclicknew1">行业动态</span><em><img src="../assets/images/shu.png" alt=""></em><span class="news_span" @click="onclicknew2" :class="{block3_curspan:(!flage)}">媒体报道</span><a href="javascript:;" @click="changemoduletoallshows('news')">更多></a></h2>
            <div class="block5_box">

              <ul class="news_ul" v-show="flage" >
                <li v-for="(news,index) in newPageInfo.list"><a href="javascript:;" @click="changemoduletonews('news',news.newId)">{{news.newTrend}}</a></li>
              </ul>
              <ul class="news_ul" v-show="!flage" >
                <li v-for="(news,index) in newPageInfo.list"><a href="javascript:;" @click="changemoduletonews('news',news.newId)">{{news.newMedia}}</a></li>
              </ul>
            </div>
          </div>
          <div class="zscf_block5_r fl">
            <h2 class="block5_r_tit clearfix"><span class="fl ">投资排行榜</span><em class="fr block5_r_tit_em"><a href="javascript:"  @click="onclicknew3" :class="{brt_acur:(flage1)}">月排行</a><a href="javascript:void (0)" @click="onclicknew4" :class="{brt_acur:(flage2)}">周排行</a><a href="javascript:" @click="onclicknew5" :class="{brt_acur:(flage3)}">总排行</a></em></h2>
            <div class="rank_box">
              <div class="rank_list" v-show="flage1">
                <ul class="rank_list_ul"  >
                  <li v-for="(month,index) in monthPageInfo.list">
                    <em class="rank_bg01">{{index}}</em>
                    <a href="#">{{month.nickName}}</a>
                    <span>￥{{month.paymoney}}</span>
                    <span>|</span>
                    <span>￥{{month.getmoney}}</span>
                  </li>
                </ul>
              </div>
              <!-- end -->
              <div class="rank_list" v-show="flage2">
                <ul class="rank_list_ul"  >
                  <li v-for="(month,index) in weekPageInfo.list">
                    <em class="rank_bg01">{{index}}</em>
                    <a href="#">{{month.nickName}}</a>
                    <span>￥{{month.paymoney}}</span>
                    <span>|</span>
                    <span>￥{{month.getmoney}}</span>
                  </li>
                </ul>
              </div>
              <!-- end -->
              <div class="rank_list" v-show="flage3">
                <ul class="rank_list_ul"  >
                  <li v-for="(month,index) in zongPageInfo.list">
                    <em class="rank_bg01">{{index}}</em>
                    <a href="#">{{month.nickName}}</a>
                    <span>￥{{month.paymoney}}</span>
                    <span>|</span>
                    <span>￥{{month.getmoney}}</span>
                  </li>
                </ul>
              </div>
              <!-- end -->
            </div>
          </div>
        </div>
        <!-- end block5 -->

        <div class="zscf_partner mt30">
          <h2 class="block3_tit clearfix "><span class="block3_curspan">合作伙伴</span></h2>
          <div class="partner_con">
            <div id="demo">
                <template>
                  <el-carousel :interval="4000" type="card" height="100px">
                    <el-carousel-item ><a href="http://www.baidu.com"><img style="width: 480px;height: 100px" src="../assets/images/timg (3).jpg" border="0" /></a></el-carousel-item>
                    <el-carousel-item ><a href="http://www.baidu.com"><img style="width: 480px;height: 100px" src="../assets/images/timg (3).jpg" border="0" /></a></el-carousel-item>
                    <el-carousel-item ><a href="http://www.baidu.com"><img style="width: 480px;height: 100px" src="../assets/images/timg (3).jpg" border="0" /></a></el-carousel-item>
                    <el-carousel-item ><a href="http://www.baidu.com"><img style="width: 480px;height: 100px" src="../assets/images/timg (3).jpg" border="0" /></a></el-carousel-item>
                    <el-carousel-item ><a href="http://www.baidu.com"><img style="width: 480px;height: 100px" src="../assets/images/timg (3).jpg" border="0" /></a></el-carousel-item>
                    <el-carousel-item ><a href="http://www.baidu.com"><img style="width: 480px;height: 100px" src="../assets/images/timg (3).jpg" border="0" /></a></el-carousel-item>
                  </el-carousel>
                </template>
                <div id="demo2"></div>
              <!--</div>-->
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import bus from "../assets/eventBus";
    export default {
        name: "index",
      data(){
        return{
          homepage:{},
          ShowPageInfo:{},
          InvestPageInfo:{},
          InvestXinPageInfo:{},
          flage:true,
          newPageInfo:{},
          monthPageInfo:{},
          weekPageInfo:{},
          zongPageInfo:{},
          flage1:true,
          flage2:false,
          flage3:false,

        }
      },
      created(){
        this.axios.get("/api/index/gethomepage")
          .then((data)=>{
            this.homepage=data.data
          })
        this.axios.get("/api/index/getshow")
          .then((data)=>{
            this.ShowPageInfo=data.data
          })
        this.axios.get("/api/index/getinvest")
          .then((data)=>{
            this.InvestPageInfo=data.data
          })
        this.axios.get("/api/index/getinvestxin")
          .then((data)=>{
            this.InvestXinPageInfo=data.data
          })
        this.axios.get("/api/index/getnewTrend")
          .then((data)=>{
            this.newPageInfo=data.data
          })
        this.axios.get("/api/index/getmonth")
          .then((data)=>{
            this.monthPageInfo=data.data
          })
        this.axios.get("/api/index/getweek")
          .then((data)=>{
            this.weekPageInfo=data.data
          })
        this.axios.get("/api/index/getzong")
          .then((data)=>{
            this.zongPageInfo=data.data
          })
      },
        methods: {
          changeModule: function (t,id) {
            localStorage.investId =id;
            this.$emit("func", t)
          },
          changemoduletonoticelist:function(t){
            this.$emit("func",t)
          },
          changemoduletoshows:function(t,showId){
            localStorage.showId=showId
            this.$emit("func",t)
          },
          changemoduletoallshows:function(t){
            this.$emit("func",t)
          },
          changemoduletonews:function(t,newId){
            localStorage.newId=newId
            this.$emit("func",t)
          },
          changemoduletoinvest:function(t){
            this.$emit("func",t)
          },
          onclicknew1:function () {
            this.flage=true
          },
          onclicknew2:function () {
            this.flage=false
          },
          onclicknew3:function () {
            this.flage1=true
            this.flage2=false
            this.flage3=false
          },
          onclicknew4:function () {
            this.flage1=false
            this.flage2=true
            this.flage3=false
          },
          onclicknew5:function () {
            this.flage1=false
            this.flage2=false
            this.flage3=true
          },

        },


    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }


</style>
